<template>
    <div class="rentalDdetails" >
      <div class="header">
        <van-nav-bar title="出租详情" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
      </div>
      <!--轮播-->
      <ul>
        <li v-for="i in rentalDdetailsData">
           <section class="rentalDdetails_head">
        <div class="rentalDdetails_head_banner">
          <van-swipe :autoplay="3000" indicator-color="white">
            <van-swipe-item >
             <img :src="i.image_url ? i.image_url:require('../assets/images/bjtp1.png')" alt="banner">
            </van-swipe-item>
          </van-swipe>
        </div>
<ul>
  <li v-for="(item,index) in  i.goods_spec_format" v-if="index==0">
    <div class="rentalDdetails_head_title">
      <h6>{{item.title}}</h6>
      <p>出租：<span>￥{{item.rental_price}} / 月</span></p>
      <p>最新时间：{{i.create_time}}</p>
    </div>
    <div class="rentalDdetails_head_con">
      <ul>
        <li>
          <p>整体面积：<span>{{item.all_area}}平方米</span></p>
        </li>
        <li>
          <p>房屋面积：<span>{{item.room_area}}平方米</span></p>
        </li>
        <li>
          <p>付款方式：<span>{{item.payment_method}}</span></p>
        </li>
        <li>
          <p>土地年限：<span>{{item.land_age}}年</span></p>
        </li>
        <li>
          <p>配套服务：<span>{{item.infrastructure}}</span></p>
        </li>
      </ul>
    </div>

    <div class="rentalDdetails_head_foot">
      <div class="rentalDdetails_head_foot_div">
        <van-icon name="location" />
        <p>{{item.province}}{{item.city}}{{item.country}}{{item.other_address}}</p>
        <!--<Location></Location>-->
      </div>
      <div class="rentalDdetails_head_foot_div1" @click="seeMap()">
        <p>查看地图</p>
        <van-icon name="arrow" />
      </div>
    </div>
  </li>
</ul>
</section>
    <section class="rentalDdetails_con">
       <div class="rentalDdetails_con_head" >
          <p class="rentalDdetails_con_head_p">联系方式</p>
          <div class="rentalDdetails_con_head_foot">
            <img :src="i.avatar" alt="" />
            <div class="rentalDdetails_con_head_right">
              <p v-if="i.alreadyAppointment==false">{{i.cardholder.substr(0,1)+"*"+i.cardholder.substr(2)}}</p>

              <!--<p v-if="i.alreadyAppointment==false">{{i.phone||hideMiddle}}</p>-->

              <p v-if="i.alreadyAppointment==false">{{i.phone.substr(0,3)+"****"+i.phone.substr(7)||0}}</p>
              <p v-if="i.alreadyAppointment==true">{{i.cardholder}}</p>
              <p v-if="i.alreadyAppointment==true">{{i.phone}}</p>
            </div>
          </div>
       </div>
      <div class="rentalDdetails_con_head" >
        <p class="rentalDdetails_con_head_p">地块介绍</p>
        <div class="rentalDdetails_con_head_foot">
          <div class="rentalDdetails_con_head_foot_text">
            {{i.goods_spec_format[0].detailed_introduction}}
          </div>
        </div>
      </div>
    </section>
    <footer>
      <div class="footer_left" @click="toFflineBooking(i)" v-if="i.alreadyAppointment==false">
        <p>线下预约 ￥50</p>
        <p>（获得联系方式）</p>
      </div>
      <div class="footer" v-if="i.alreadyAppointment==true">
        <p>已预约</p>
      </div>

      <div class="footer_right" v-if="i.alreadyAppointment==false" @click="toImmediateLease(i)">
        <p>立即租赁</p>
        <p>（获得联系方式）</p>
      </div>
      <div class="footer1" v-if="i.alreadyAppointment==true">
        <p>已租赁</p>
      </div>
    </footer>
        </li>
      </ul>
        <!--<stcMap v-show="show"></stcMap>-->
    </div>
</template>

<script>
   import stcMap from '@/components/stcMap'
    export default {
        name: "rentalDdetails",
      data() {
        return {
          rentalDdetailsData:[],
          product_id:this.$route.query.product_id,
          userId:this.$cookies.get('user_id')||localStorage.getItem('user_id'),
          show:false,
        };
      },
      components: {
        stcMap
      },
      // filters: {
      //   hideMiddle(val) {
      //     return `${val.substring(0,3)}****${val.substring(val.length-3)}`
      //   },
      //
      // },
      mounted() {
        //注释注释
           this.getInitData();
      },
      methods: {

        //  返回上一层
        onClickLeft() {
          this.$router.go(-1);
          this.$toast("返回");
        },
        //查看地图
        seeMap(){
          // this.show=true;
          this.$toast("暂未开放此功能")
        },
        //跳转线下预约
        toFflineBooking(i){
            this.$router.push({path: '/offlineBooking', query:{id:i.id,}})
        },
        //跳转立即租赁
        toImmediateLease(i){
          this.$router.push({path: '/immediateLease', query:{id:i.id,}})
        },


        //初始化页面
        async getInitData() {
          let params = {
            product_id:this.product_id,
          };
          const res = await this.$axios.post(this.$api.rentalDdetailsData, params);
          if (res.success) {
            this.rentalDdetailsData = res.data;
            console.log(this.rentalDdetailsData)
            this.rentalDdetailsData.forEach((i, index) => {
              if (typeof i.goods_spec_format=="string") {
                i.goods_spec_format = JSON.parse(i.goods_spec_format);
              }
            });
          } else {
            this.rentalDdetailsData = [];
            this.$toast(res.msg);
          }
        },

      }
    }
</script>

<style scoped>
  .header{width: 100%;}
  .rentalDdetails_head{width: 100%;margin-top: 0.57rem;}
  .rentalDdetails_head_banner{margin: 0 0.17rem 0.32rem;border-radius: 0.1rem;height: 1.75rem;}
  .van-swipe-item{border-radius: 0.1rem;height: 1.75rem!important;}
  .van-swipe-item img{width: 100%;border-radius: 0.1rem;height: 100%;}
  .rentalDdetails_head_title{overflow: hidden;margin: 0.11rem 0.17rem;}
  .rentalDdetails_head_title h6{font-size: 0.16rem;color: #000;padding-bottom: 0.16rem;}
  .rentalDdetails_head_title p:nth-child(2){color: #000;font-size: 0.14rem;float: left;}
  .rentalDdetails_head_title p span{color: #f44736;}
  .rentalDdetails_head_title p:nth-child(3){color: #bdbcbc;font-size: 0.11rem;float: right;}
  .rentalDdetails_head_con{margin: 0.13rem 0.17rem;background-color: #fff;border-radius: 0.1rem;}
  .rentalDdetails_head_con ul{overflow: hidden;padding: 0.2rem 0.1rem;}
  .rentalDdetails_head_con ul li{float: left;width: 50%;line-height: 0.24rem;}
  .rentalDdetails_head_con ul li p{font-size: 0.15rem;color:#bdbcbc; }
  .rentalDdetails_head_con ul li p span{color: #000;}
  .rentalDdetails_con{width: 100%;padding-bottom: 0.59rem;}
  .rentalDdetails_con_head{margin: 0.13rem 0.17rem;background-color: #fff;border-radius: 0.1rem;}
  .rentalDdetails_con_head_p{font-size: 0.15rem;padding: 0.1rem;}
  .rentalDdetails_con_head_foot{border-top: 1px solid #f2f2f2;margin: 0 0.1rem; overflow: hidden;}
  .rentalDdetails_con_head_foot img{width: 0.36rem;height: 0.36rem;border-radius: 0.8rem;margin: 0.1rem;float: left;}
  .rentalDdetails_con_head_right{width: 70%;margin: 0.1rem;float: left;}
  .rentalDdetails_con_head_right p{font-size: 0.14rem;}
  .rentalDdetails_con_head_foot_text{padding: 0.1rem 0;}
  footer{width: 100%;overflow: hidden;position: fixed;bottom: 0;height: 0.59rem;}
  .footer_left{width: 50%;float: left;background-color: #fff;text-align: center;height: 0.59rem;}
  .footer_left p:nth-child(1){font-size: 0.15rem;color: #00bf47;padding-top: 0.1rem}
  .footer_left p:nth-child(2){font-size: 0.13rem;color: #00bf47;}
  .footer_right{width: 50%;float: left;background-color: #00bf47;text-align: center;height: 0.59rem;}
  .footer_right p:nth-child(1){font-size: 0.15rem;color: #fff;padding-top: 0.1rem}
  .footer_right p:nth-child(2){font-size: 0.13rem;color: #fff;}
  .footer{width: 50%;float: left;background-color: #fff;text-align: center;height: 0.59rem;border-top: 1px solid #f2f2f2;}
  .footer p{line-height: 0.59rem;color:#bdbcbc;}
  .footer1{width: 50%;float: left;background-color: #fff;text-align: center;height: 0.59rem;border-top: 1px solid #f2f2f2;border-left: 1px solid #f2f2f2;}
  .footer1 p{line-height: 0.59rem;color:#bdbcbc;}
  @media screen and (min-width:320px) and (max-width:374px) and (orientation:portrait) {
    .rentalDdetails_head_foot{margin: 0.13rem 0.17rem;background-color: #fff;border-radius: 0.1rem;overflow: hidden;}
    .rentalDdetails_head_foot_div{float: left;overflow: hidden;width: 72%;}
    .rentalDdetails_head_foot_div .van-icon{color: #01bf47;float: left;font-size: 0.16rem;padding: 0.12rem 0.05rem 0.12rem 0.1rem;}
    .rentalDdetails_head_foot_div p{font-size: 0.14rem;color: #01bf47;float: left;padding: 0.1rem 0;width: 84%;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;}
    .rentalDdetails_head_foot_div1{float: right;overflow: hidden;width: 27%}
    .rentalDdetails_head_foot_div1 .van-icon{color: #bdbcbc;float: left;font-size: 0.16rem;padding: 0.12rem 0 0.12rem 0.05rem;}
    .rentalDdetails_head_foot_div1 p{font-size: 0.14rem;color: #bdbcbc;float: left;padding: 0.1rem 0;}
  }
  @media screen and (min-width:375px) and (max-width:414px) and (orientation:portrait) {
    .rentalDdetails_head_foot{margin: 0.13rem 0.17rem;background-color: #fff;border-radius: 0.1rem;overflow: hidden;}
    .rentalDdetails_head_foot_div{float: left;overflow: hidden;width: 74%;}
    .rentalDdetails_head_foot_div .van-icon{color: #01bf47;float: left;font-size: 0.16rem;padding: 0.12rem 0.05rem 0.12rem 0.1rem;}
    .rentalDdetails_head_foot_div p{font-size: 0.14rem;color: #01bf47;float: left;padding: 0.1rem 0;width: 86%;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;}
    .rentalDdetails_head_foot_div1{float: right;overflow: hidden;width: 25%}
    .rentalDdetails_head_foot_div1 .van-icon{color: #bdbcbc;float: left;font-size: 0.16rem;padding: 0.12rem 0.05rem 0.12rem 0.05rem;}
    .rentalDdetails_head_foot_div1 p{font-size: 0.14rem;color: #bdbcbc;float: left;padding: 0.1rem 0;}
  }

</style>
